<template xmlns:v-popover="">
  <div class="main-body" :style="{minHeight:docHeight}">
    <div class="breadcrumb">
      <el-breadcrumb separator=">">
        <i class="bread-ico">
          <icon name="wpexplorer"></icon>
        </i>
        <el-breadcrumb-item :to="{ path: '/' }">
          首页
        </el-breadcrumb-item>
        <el-breadcrumb-item  :to="{path:'/reset_pwd'}" >重置密码</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="tabpane-container" ref="tabpaneContainer"  v-loading.body="loading" element-loading-text="拼命加载中" element-loading-customClass="partloading">
        <el-tabs  v-model="activeName" >
          <el-tab-pane label="重置密码" name="index">
            <el-form label-width="100px" :rules="rules" :model="userForm" ref="userForm" label-position="left" >
              <el-row >
                <el-col :span="12">

                  <el-form-item label="验证码:" prop="verify_code">
                    <el-col :span="12" >
                      <el-input v-model="userForm.verify_code" auto-complete="off" placeholder="验证码"  ></el-input>
                    </el-col>
                    <div style="display: inline-block;margin-left: 1rem;">
                      <el-button  v-if="finish === true" @click="send()">发送验证码</el-button>
                      <el-button v-if="finish === false" :disabled="true">({{ countDown }}s)后才能发送</el-button>
                    </div>
                  </el-form-item>


                  <el-form-item label="新密码:" prop="password">
                    <el-col :span="12">
                      <el-input type="password" v-model="userForm.password" auto-complete="off" placeholder="新密码"></el-input>
                    </el-col>
                  </el-form-item>

                  <el-form-item label="确认密码:" prop="confirm_password">
                    <el-col :span="12">
                      <el-input type="password" v-model="userForm.confirm_password" auto-complete="off" placeholder="确认密码"></el-input>
                    </el-col>
                  </el-form-item>

                  <el-form-item>
                    <el-col :span="12">
                      <el-button type="primary" :loading="but_loading" @click="submitForm('userForm')" >保 存</el-button>
                    </el-col>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapState, mapActions} from 'vuex'
  import Header from 'components/AdminHeader'
  import LeftSideBar from 'components/LeftSideBar'
  import {
    Breadcrumb, BreadcrumbItem,Tabs, TabPane,Form,FormItem,Input,Button,Row,Col,Popover
  } from 'element-ui'
  import { doValid, isAllValid } from '../lib/validator'
  import Icon from 'vue-awesome/components/Icon.vue'
  import 'vue-awesome/icons/wpexplorer'
  import MainPage from './MainPage'

  export default {
    data () {
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入确认密码'));
        } else if (value !== this.userForm.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        docHeight: window.innerHeight + 'px',
        loading:false,
        activeName:'index',
        countDown:60,
        finish:true,
        userForm:{
//          password:"",
//          confirm_password:'',
//          verify_code:''
        },
        rules: {
          verify_code: [
            { required: true, message: '请输入验证码', trigger: 'change' },
            { len: 4, message: '长度为4个字符', trigger: 'change' }
          ],
          password: [
            { required: true, message: '请输入新密码', trigger: 'change' },
            { min:6, message: '必须6个字符以上', trigger: 'change'}
          ],
          confirm_password: [
            { required: true, message: '请输入确认密码', trigger: 'change' },
            { min:6, message: '必须6个字符以上', trigger: 'change'},
            { validator:validatePass2, trigger: 'change'}
          ]
        },
        but_loading:false
      }
    },
    methods:{
      loaded () {

      },
      send () {
        this.sendSmsCode({ mobile_num: this.username })
        this.finish = false
        this.cid = setInterval(() => {
          if (this.countDown > 0) {
            this.countDown --
            if (this.countDown < 10) {
              this.countDown = '0' + this.countDown
            }
          } else {
            clearInterval(this.cid)
            this.finish = true
            this.countDown = 60
          }
        }, 1000)
      },

      submitForm(formName) {
        const params = {
          username: this.username,
          uid: this.uid,
          password: this.userForm.password,
          verifyCode: this.userForm.verify_code
        }
        this.but_loading = true
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.resetPassword(params).then((response) => {
//              this.but_loading = false
              this.$router.push({ path: '/user/login' })

            }).catch((response) => {
              this.but_loading = false
            })
          } else {
            this.but_loading = false
            return false;
          }
        });
      },

      ...mapActions({
        sendSmsCode: 'sendSmsCode',
        resetPassword: 'resetPassword'
      })
    },
    mounted: function () {
//      this.updateMenuIndex('reset_pwd')
    },
    components : {
      LeftSideBar: LeftSideBar,
      ELHeader: Header,
      'el-breadcrumb': Breadcrumb,
      'el-breadcrumb-item': BreadcrumbItem,
      'icon': Icon,
      'el-tabs': Tabs,
      'el-tab-pane': TabPane,
      'el-form': Form,
      'el-form-item' : FormItem,
      'el-input' : Input,
      'el-button' : Button,
      'el-row' : Row,
      'el-col' : Col,
      [Popover.name]: Popover,
      MainPage: MainPage
    },
    computed: {
      ...mapState({
//        site_id: state => state.auth.site_id,
//        token: state => state.auth.user.token,
        username: state => state.auth.user.username,
        uid: state => state.auth.user.id
      })
    }
  }
</script>

<style lang="scss">
  @import '../scss/index';
  .content-main {
    height: 0;
    position: relative;
    float: left;
    min-height: 100%;
    width: 85%;
  }


  .bread-ico {
    float: left;
    margin-right: 8px;
    margin-top: -8px;
    width: 30px;

    .fa-icon {
      width: 100%;
      height: 100%;
    }
  }
</style>
